import { title } from "process";
import { Component, ReactNode } from "react";


/*
    在 React 中插槽类似于鸿蒙中的尾随闭包，可以将标签传递到子组件中使用
    传递的时候根标签只能有 1 个

    如果需要传递多个，那么可以使用属性传递
*/

interface HeaderProps {
    children: ReactNode
}


class Header extends Component { 
    // 读取游戏卡，children 是固定写法
    props = {
        children:<></>
    }

    render(): ReactNode {
        return <header>
             {/* 使用游戏卡 */}
             <h1>头部</h1>
            {this.props.children}</header>
    }

}

function Content (prop: HeaderProps){ 
    return <>
    <h1>内容</h1>
    {prop.children}
    </>
}



export default class App extends Component {

    state = { title: "React" }
    render(): ReactNode {
        return<>
        <div>
            <h1>父组件 -- {this.state.title}</h1>
            <hr />
            <Header>
                {/* 插槽中只能有一个根标签 */}
                <div>
                    {/* del 理解为游戏卡 */}
                    <del>￥199.99</del>
                    <span style = {{color:"red"}}>￥158</span>
                </div>
            </Header>
            <hr />
            <Content>
                <h1>你好世界</h1>
            </Content>
        </div>
        </>
    }

}


